<template>
  <div class="about">
    <!-- 动画效果 -->
    <br />
    <my-button animated="vertical">
      <div slot="hidden">$10000</div>
      <div slot="visible">
        <i class="shop icon"></i>不要错过哈
      </div>
    </my-button>

    <br />

    <my-button animated="fade">
      <div slot="hidden">$10000</div>
      <div slot="visible">
        <i class="shop icon"></i>不要错过哈
      </div>
    </my-button>

    <br />

    <!-- 使用组件 -->
    <my-button></my-button>
    <hr />
    <my-button size="mini" disabled>刮大风了！</my-button>
    <hr />
    <my-button size="big" icon="sign language">停电了！</my-button>
    <hr />
    <my-button size="large" icon="book" disabled loading>我服了！！</my-button>
    <hr />
    <my-button size="massive" icon="bug" disabled>又停电了！</my-button>
    <hr />
    <my-button size="large" icon="coffee">终于来电了！！</my-button>
    <hr />
    <my-button size="massive" icon="cloud" @click="hclick()">可不要再停了呀！</my-button>
    <hr />
    <my-button loading></my-button>
    <my-headline></my-headline>
  </div>
</template>

<script>
export default {
  name: 'PageButton',
  methods: {
    hclick () {
      alert('用户的点击事件')
    }
  }
}
</script>
